<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>office软件</title>
		<!-- 引入框架 -->
		<!-- 引入框架 -->
		<link rel="stylesheet" href="../css/common.css" />
		<link rel="stylesheet" href="../css/top&footer.css" />
		<link rel="stylesheet" href="../css/model.css" />
		<!-- 图标字体 -->
		<link rel="stylesheet" href="../图标字体/1/iconfont.css" />
		<link rel="stylesheet" href="../lib/cloudService/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../lib/cloudService/js/jquery.min.js" />
		<link rel="stylesheet" href="../lib/cloudService/js/bootstrap.min.js" />
		<!-- 引入tool中的icon -->
		<link rel="stylesheet" href="../lib/cloudService/tool/font/iconfont.css" />
		<!-- 引入常规样式 -->
		<link rel="stylesheet" href="../lib/cloudService/css/tool.css" />
		<link rel="stylesheet" href="../lib/cloudService/css/footer.css" />
		<!-- 引入背景色 -->
		<link rel="stylesheet" href="../lib/cloudService/css/li-bgc-color.css" />
		<style>
			/* 头部 */
			.nav-top a {
				color: #000;
			}

			.log-top {
				color: #000;
				border: 1px solid #f0f0f0;
			}
			header {
				border-bottom: rgba(41, 71, 240, 0.5) 1px solid;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
			}
			/* 主体第一部分 */
			#det1 {
				width: 100%;
				height: 400px;
				background-color: rgba(240, 240, 240, 0.4);
				padding-top: 48px;
			}
			#det1 > div {
				height: 348px;
				width: 1100px;
				border: none;
				margin: 0 auto;
				justify-content: space-between;
				align-items: center;
			}
			.placeholder {
				height: 50px;
			}
			.active1 {
				border-bottom: 2px solid #00bdff;
			}
			.tool-nav .nav-pills {
				height: 42px;
			}
		</style>
	</head>

	<body>
		<!-- 头部 -->
		<header class="z99">
			<span class="reminder1">可跳转的有</span>
			<span class="reminder2">好多好多好多</span>
			<span class="reminder3">好多好多</span>
			<div class="header-top fe b-box flex-c-sb">
				<!-- log -->
				<img src="../img/new-logo-white.png" alt="" />
				<!-- nav -->
				<nav class="nav-top fe flex-sb">
					<a href="../html/index.html" class="fc-white">首页</a>
					<a href="../html/api.html" class="fc-white">API</a>
					<a href="../html/service.html" class="fc-white active1">云服务</a>
					<a href="../html/example.html" class="fc-white">案例</a>
					<a href="../html/developer.html" class="fc-white">开发者</a>
				</nav>
				<!-- 登录注册 -->
				<div class="btn-top fe flex-sb">
					<button class="log-top fc-white cursor">登录</button>
					<button class="register-top cursor">注册有礼</button>
				</div>
			</div>
		</header>
		<div class="placeholder"></div>
		<!-- 顶部内容 -->
		<div class="container">
			<h2 class="page-header">
				<div class="row">
					<div class="col-xs-3">入职必备</div>
				</div>
			</h2>
		</div>

		<!-- 导航 -->
		<div class="container tool-nav">
			<ul class="nav nav-pills">
				<li role="presentation"><a href="./service.html">生存利器</a></li>
				<li role="presentation"><a href="soft.html">系统软件</a></li>
				<li class="active" role="presentation">
					<a href="#">办公室白领必备技巧</a>
				</li>
			</ul>
		</div>

		<!-- 软件工具明细 -->
		<div class="container">
			<!-- 添加标题 创意工具 -->
			<span class="glyphicon glyphicon-tags" style="margin: 15px 0">
				办公室白领必备软件</span
			>
			<div class="row text-center">
				<div class="col-md-4 col-xs-12 col-sm-6 tool-li">
					<a href="#" target="_blank">
						<div class="tool-li-li li-bgc-40">
							<i class="iconfont icon-Office"></i>
						</div>
					</a>
					<div class="text-left" style="margin-top: 10px">office</div>
					<div class="text-left text-color-height">微软office 2010</div>
				</div>

				<div class="col-md-4 col-xs-12 col-sm-6 tool-li">
					<a href="hhttps://www.wps.cn/" target="_blank">
						<div class="tool-li-li li-bgc-41">
							<i class="iconfont icon-wps"></i>
						</div>
					</a>
					<div class="text-left" style="margin-top: 10px">WPS</div>
					<div class="text-left text-color-height">金山WPS</div>
				</div>
			</div>

			<!-- 底部通用代码 -->
			<div class="container footer" style="margin-bottom: 15px">
				<h5 class="page-header" style="margin-bottom: 10px">About</h5>
				<a
					style="margin-right: 15px"
					href="https://www.bootcss.com/"
					target="view_window"
					>Bootstrap</a
				>
				<a
					style="margin-right: 15px"
					href="https://glyphicons.com/"
					target="view_window"
					>Glyphicons</a
				>
				<a
					style="margin-right: 15px"
					href="http://iconfont.cn/"
					target="view_window"
					>iconfont</a
				>
			</div>
		</div>
		<!-- 模态框 -->
		<section class="model"></section>
		<script src="../js/util.js"></script>
		<script src="../js/login&register.js"></script>
	</body>
</html>
